<template>
  <!-- 产品品质 -->
  <div class="qualityPc">
    <div class="box" v-if="data">
      <div class="quality" id="quality">
        <div v-html="data?.zlbz?.contentweb"></div>
      </div>

      <div class="herbs" id="herbs">
        <div v-html="data?.ddyc?.contentweb"></div>
      </div>

    </div>

  </div>
  <div class="qualityM">
    <div class="box" v-if="data">
        <div class="quality" id="m-quality">
        <div v-html="data?.zlbz?.contentmobile"></div>
      </div>

      <div class="herbs" id="m-herbs">
        <div v-html="data?.ddyc?.contentmobile"></div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      data: null,

    };
  },


  mounted() {
    this.getData();

  },
  methods: {

    /**
     * 位置
     */
    to() {

      if (this.$route.query.name) {
        // 等待dom加载完毕后执行
        this.$nextTick(() => {
          let targetbox;
          let target;
          //区分移动端和pc
          if (document.body.clientWidth <= 1200) {

            targetbox = document.getElementById( "m-"+this.$route.query.name);
            targetbox.scrollIntoView({ block: 'start', behavior: 'smooth' });
         
        
          } else {
            // 1,通过形参获取当前需要的dom
            targetbox = document.getElementById(this.$route.query.name);
            // 2,获取该dom距离页头的高度
            target = targetbox.offsetTop;

            // 3,执行页面跳转
            document.documentElement.scrollTop = target;
          }


        });



      }
    },
    async getData() {
      try {

        //获取文图
        const result = await this.$request.get("/productquality/qualityManagement", {
          params: {
            cid: this.$utils.getNavId("productQuality"),
          }
        });
        this.data = result.data;
        this.to();


      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.qualityM {
  display: none;
}

.qualityPc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1920px;
  min-height: 100vh;



  .box {
    margin-top: 63px;
    width: 1200px;

    .herbs {
      margin-top: 20px;
      width: 100%;
      overflow: hidden;
    }

    .quality {
      width: 100%;
      overflow: hidden;
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .qualityPc {
    display: none;
  }

  .qualityM {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fn.rpx(750);

    .box {
      margin-top: fn.rpx(63);
      width: fn.rpx(750);

   
    .herbs {
     
      width: 100%;
      overflow: hidden;
    }

    .quality {
      width: 100%;
      overflow: hidden;
    }
    }
  }


}
</style>